<template>
  <div class="">
    <my-header>
      <span>{{ title }}</span>
    </my-header>

    <my-list
      v-for="(item, index) in shopList"
      :key="index"
      :item="item"
      @click="$router.push('/detail/' + item.id)"
    ></my-list>
    <!-- 封装的是单个的商品 -->
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import myHeader from "@/components/myHeader.vue";
import myList from "@/components/myList.vue";
import { getResList } from "../utils/api.js";
//引入请求商家列表的接口

export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      shopList: [],
    });
    const { title, wd, jd } = route.query;
    // const title=route.query.title
    // const wd=route.query.wd
    // const jd=route.query.jd
    console.log(title, wd, jd);
    getResList({ wd, jd }).then((res) => {
      console.log(res);
      data.shopList = res;
    });
    //请求商家列表 把经纬度传过去

    return { ...toRefs(data), title, wd, jd };
  },
  components: {
    myHeader,
    myList,
  },
};
</script>

<style lang="scss"></style>
